import React, { useState, useEffect } from "react";
import { Link } from 'react-router-dom'
import CardContainer from "../components/CardContainer";
import CardBodyRecommend from '../components/CardBodyRecommend'
import CardNewDjComp from '../components/CardNewDjComp'
import CardRankComp from '../components/CardRankComp'

import style from './index.css'
import { playlisthotReq } from "@/utils/api/recommend";

const CardInsideNav = () => {
  const [navlist, setNavlist] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const res = await playlisthotReq()
      if (res.data.code == 200) {
        let list = res.data.tags
        setNavlist(list.splice(0, 8))
      }
    }

    fetchData()
  }, [])


  if (navlist.length <= 0) {
    return <div>Loading...</div>
  }

  return (
    <div className={style.navList}>
      {navlist.map((nav) => 
        <Link className={style.navItem} key={nav.id} to="#">
          {nav.name}
        </Link>)}
    </div>
  );
};

export default function LeftRecommendContainer() {
  return (
    <div style={{borderLeft: '1px solid #bbb', paddingBottom: '100px'}}>
      <CardContainer title="热门推荐" isNormal={false} path="/discover/musiclist">
        <CardInsideNav />
        <CardBodyRecommend />
      </CardContainer>
      <CardContainer title="新碟上架">
        <CardNewDjComp />
      </CardContainer>
      <CardContainer title="榜单">
        <CardRankComp />
      </CardContainer>
    </div>
  );
}
